<template>
  <div class="footerBox">
    <div class="foot flex-row flex-around">
      <div
        class="footItem flex-center"
        v-for="item in footList.slice(0, 2)"
        :key="item.id"
        @click="onFootItem(item)"
      >
        <img :src="item.img" alt="" v-if="!item.status" />
        <img :src="item.imgActive" alt="" v-else />
        <p :class="[item.status ? 'pActive' : '']">{{ item.title }}</p>
      </div>
      <div
        class="footItem2 flex-center"
        v-for="item in footList.slice(2, 3)"
        :key="item.id"
        @click="onFootItem(item)"
      >
        <img :src="item.img" alt="" v-if="!item.status" />
        <img :src="item.imgActive" alt="" v-else />
        <p :class="[item.status ? 'pActive' : '']">{{ item.title }}</p>
      </div>
      <div
        class="footItem flex-center"
        v-for="item in footList.slice(3)"
        :key="item.id"
        @click="onFootItem(item)"
      >
        <img :src="item.img" alt="" v-if="!item.status" />
        <img :src="item.imgActive" alt="" v-else />
        <p :class="[item.status ? 'pActive' : '']">{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import router from "../router";

export default defineComponent({
  props: {
    tab: {
      type: String || Number,
      default: "0",
    },
  },
  setup(props) {
    const footList = ref([
      {
        id: 0,
        title: "首页",
        img: require("@/image/footer/shouye_wei_btn.png"),
        imgActive: require("@/image/footer/shouye_btn.png"),
        pageUrl: "/",
        status: false,
      },
      {
        id: 1,
        title: "分类",
        img: require("@/image/footer/feilei_btn.png"),
        imgActive: require("@/image/footer/fenlei-xuanzhong_btn.png"),
        pageUrl: "/classify",
        status: false,
      },
      {
        id: 2,
        title: "商学院",
        img: require("@/image/footer/shangxueyuan_btn.png"),
        imgActive: require("@/image/footer/shangxueyuan_btn.png"),
        pageUrl: "/business",
        status: false,
      },
      {
        id: 3,
        title: "购物车",
        img: require("@/image/footer/gouwuche_btn.png"),
        imgActive: require("@/image/footer/gouwuche_btn_act.png"),
        pageUrl: "/cart",
        status: false,
      },
      {
        id: 4,
        title: "我的",
        img: require("@/image/footer/wode_btn.png"),
        imgActive: require("@/image/footer/wode-xuanzhong_btn.png"),
        pageUrl: "/my",
        status: false,
      },
    ]);

    // 根据父组件的传参使子组件高亮显示
    function onTab() {
      footList.value.forEach((item) => {
        item.status = false;
        if (props.tab == item.id) {
          item.status = true;
        }
      });
    }
    onTab();

    // 点击事件
    function onFootItem(param) {
      footList.value.forEach((item) => {
        item.status = false;
        if (param.id == item.id) {
          item.status = true;
          router.push(item.pageUrl);
        }
      });
    }

    return {
      footList,
      onFootItem,
    };
  },
});
</script>

<style scoped lang="less">
.footerBox {
  width: 100%;
  height: 136px;
  background-color: transparent;
  position: fixed;
  left: 0;
  bottom: 0;
  padding-top: 48px;
  z-index: 10;
  .foot {
    width: 100%;
    height: 88px;
    background-color: #fff;
    .footItem {
      flex-direction: column;
      img {
        width: 44px;
        height: 44px;
      }
      p {
        color: #4d4d4d;
        font-size: 22px;
      }
      .pActive {
        color: #e00b12;
      }
    }
    .footItem2 {
      width: 136px;
      height: 136px;
      border-radius: 50%;
      position: relative;
      top: -24px;
      flex-direction: column;
      background-color: #fff;
      img {
        width: 88px;
        height: 88px;
      }
      p {
        color: #4d4d4d;
        font-size: 22px;
      }
      .pActive {
        color: #e00b12;
      }
    }
  }
}
</style>